<template>
	<view class="seat-selection">
		<view style="background-color: #2F75FA; height: 160rpx;"></view>
		
		<view class="top d-inline-block">
			<view class="goods d-flex" style="margin-top: -90rpx;">
				<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
				<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
					<view>
						<view class="name">{{ data.name }}</view>
						<view class="status">{{ data.status }}</view>
					</view>
					<view class="flex-between">
						<price :value="data.price" color="#FF4105"></price>
						<view class="rest">
							剩余：{{ data.rest }}名
						</view>
					</view>
				</view>
			</view>
		
			
			<view class="current-area flex-between" @click="chooseArea">
				<view>
					<u-text text="当前区域" color="#888"></u-text>
					<view style="margin-top: 14rpx;">
						<u-text text="场地东侧-A区" color="#333" bold></u-text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#BEBEBE"></u-icon>
			</view>
			
			<view class="price-list d-flex flex-wrap">
				<view
					v-for="item in priceList"
					:key="item.value"
					class="item flex-align"
				>
					<view class="color" :style="{ backgroundColor: item.color }"></view>
					<view>
						¥ {{ item.value }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="seat-wrapper">
			<view class="flex-between">
				<view class="flex-align">
					<u-icon name="info-circle-fill" color="#2F75FA"></u-icon>
					<u-text text="场地布局图" color="#2F75FA" size="24rpx" margin="0 0 0 7rpx"></u-text>
				</view>
				<view class="flex-align">
					<u-image :src="`${assetsPath}64f9cbea836e9d11679fa01d247771f5ba8d342b.png`" width="33rpx" height="33rpx"></u-image>
					<u-text text="已售/不可售" color="#999" size="24rpx" margin="0 0 0 7rpx"></u-text>
				</view>
			</view>
			
			<view class="d-flex" style="margin-top: 32rpx;">
				<view class="side">
					<view
						v-for="(item, index) in seat.length"
						:key="index"
					>
						{{ 'A' + (index + 1) }}
					</view>
				</view>
				
				<view class="seat-list oa-x flex-grow-1">
					<view class="head flex-align">
						<view
							v-for="(item, index) in seat[0].length"
							:key="index"
							class="head-col flex-center"
						>
							{{ index + 1 }}
						</view>
					</view>
					
					<view
						v-for="(row, x) in seat"
						:key="x"
						class="row flex-align"
					>
						<view
							v-for="(col, y) in row"
							:key="y"
							class="col flex-center"
						>
							<view @click="chooseSeat(col, x, y)" class="pr">
								<u-image :src="col.icon" width="45rpx" height="41rpx"></u-image>
								<view class="checked pa" v-if="isChecked(x, y) !== -1">
									<u-icon name="checkmark" color="#fff" size="24rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="selected-list d-flex">
				<view
					v-for="item in selected"
					class="item pr flex-shrink-0"
				>
					<u-text text="东侧A区" color="#999" size="22rpx"></u-text>
					<u-text :text="`A${item.x + 1}排${item.y + 1}号`" color="#000" size="22rpx"></u-text>
					<view class="remove pa" @click="removeSeat(item.x, item.y)">
						<u-icon name="close-circle-fill" color="#2F75FA" size="40rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-add-btn flex-between">
			<price :value="totalPrice" color="#FF4105"></price>
			<u-button text="确认选择" shape="circle" @click="confirm" customStyle="width: 318rpx; margin: 0;" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			assetsPath: this.$https.assetsPath,
			data: {
				name: 'CBA骏熙泰羽',
				status: '进行中',
				price: 888,
				rest: 8
			},
			disabledSeat: { disabled: true, icon: this.$https.assetsPath + '64f9cbea836e9d11679fa01d247771f5ba8d342b.png' },
			priceList: [
				{ value: 50, color: '#55D74E', icon: this.$https.assetsPath + 'fa4970cb83f628ad18d9989d1b21c4ed02f220da.png' },
				{ value: 80, color: '#FF5757', icon: this.$https.assetsPath + '38409009244a3063807e7ec86dc5b7d402f2cc2d.png' },
				{ value: 90, color: '#F852E2', icon: this.$https.assetsPath + '37ca69afdcb3b21ca91550bd097aab58e47a5d2b.png' },
				{ value: 98, color: '#F8D032', icon: this.$https.assetsPath + '008069554495a7c9215ae1c60046f7a5dc2598c1.png' },
			],
			activeArea: 1,
			selected: []
		}
	},
	computed: {
		totalPrice() {
			return this.selected.reduce((prev, item) => prev + (item.value || 0), 0)
		},
		seat() {
			return [
				[
					this.priceList[0],
					this.disabledSeat,
					this.priceList[0],
					this.priceList[0],
					this.disabledSeat,
					this.priceList[0],
					this.disabledSeat,
					this.priceList[0],
					this.priceList[0],
					this.priceList[0],
					this.disabledSeat,
					this.priceList[0],
					this.priceList[0],
				],
				[
					this.priceList[1],
					this.priceList[1],
					this.disabledSeat,
					this.priceList[1],
					this.disabledSeat,
					this.priceList[1],
					this.priceList[1],
					this.disabledSeat,
					this.priceList[1],
					this.priceList[1],
					this.priceList[1],
					this.disabledSeat,
					this.priceList[1],
				],
				[
					this.priceList[2],
					this.priceList[2],
					this.priceList[2],
					this.priceList[2],
					this.disabledSeat,
					this.priceList[2],
					this.disabledSeat,
					this.priceList[2],
					this.disabledSeat,
				] 
			]
		}
	},
	methods: {
		chooseSeat(item, x, y) {
			if (item.disabled) return;
			const index = this.isChecked(x, y);
			if (index !== -1) {
				this.selected.splice(index, 1);
				return;
			}
			this.selected.push({
				x,
				y,
				...item
			});
		},
		isChecked(x, y) {
			return this.selected.findIndex(item => item.x === x && item.y == y);
		},
		removeSeat(x, y) {
			this.selected.splice(this.isChecked(x, y), 1);
		},
		confirm() {
			uni.navigateTo({
				url: '/pages/activity-seat/seat-selection/collect-info/collect-info'
			});
		},
		chooseArea() {
			uni.navigateTo({
				url: '/pages/activity-seat/seat-selection/choose-area/choose-area'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.seat-selection {
	padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	
	.top {
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 0 30rpx 20rpx;
		margin-top: -30rpx;
		width: 100%;
		box-shadow: 0px 24rpx 57rpx 0px rgba(8, 73, 162, 0.05);
		
		.name,
		.status {
			color: #fff;
		}
	}
	
	.goods {
		.name {
			font-size: 28rpx;
		}
		
		.status {
			font-size: 24rpx;
		}
		
		.rest {
			color: #BEBEBE;
			font-size: 22rpx;
		}
	}
	
	.current-area {
		background: rgba(47, 117, 250, 0.1);
		border: 1px solid #2F75FA;
		border-radius: 5rpx;
		margin: 40rpx 0 20rpx;
		padding: 30rpx;
	}
	
	.price-list {
		font-size: 24rpx;
		
		.item {
			background: rgba(216, 221, 255, 0.2);
			border: 1px solid #EFEFEF;
			border-radius: 32rpx;
			padding: 15rpx;
			
			& + .item {
				margin-left: 15rpx;
			}
		}
		
		.color {
			width: 37rpx;
			height: 37rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
	}
	
	.seat-wrapper {
		padding: 36rpx 25rpx;
		
		.side {
			margin-top: 64rpx;
			font-size: 20rpx;
			margin-right: 35rpx;
			
			view {
				line-height: 41rpx;
				padding-bottom: 24rpx;
			}
		}
		
		.head {
			
			height: 40rpx;
			color: #999999;
			font-size: 20rpx;
			margin-bottom: 24rpx;
			
			.head-col {
				flex: 1 0 11.11%;
				height: 100%;
				background: #F3F3F3;
			
				&:first-of-type {
					border-radius: 18rpx 0 0 18rpx;
				}
				
				&:last-of-type {
					border-radius: 0 18rpx 18rpx 0;
				}
			}
		}

		.seat-list {
			.col {
				padding-bottom: 24rpx;
				flex: 1 0 11.11%;
			}
			
			.checked {
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		
		.selected-list {
			margin-top: 80rpx;
			padding-top: 20rpx;
			
			.item {
				background: #F3F3F3;
				border: 2rpx solid #2F75FA;
				border-radius: 10rpx;
				padding: 14rpx 23rpx;
				
				& + .item {
					margin-left: 35rpx;
				}
			}
			
			.remove {
				right: 0;
				top: 0;
				transform: translate(50%, -50%);
			}
		}
	}
}
</style>